// NoUiSlider 滑动条

.noUi-target {
    @include e-not-rounded {
        border-radius: 0 !important;
    }

    &.noUi-horizontal {
        height: 15px;

        .noUi-handle {
            width: 24px;
            height: 24px;
            left: -17px;
            top: -6px;
            border-radius: 50%;
            outline: none;

            &::before {
                display: none;
            }

            &::after {
                display: none;
            }
        }
    }

    &.noUi-vertical {
        height: 150px;
        width: 15px;

        .noUi-handle {
            width: 24px;
            height: 24px;
            left: -5.5px;
            top: -6px;
            border-radius: 50%;
            outline: none;

            &::before {
                display: none;
            }

            &::after {
                display: none;
            }
        }
    }


    // State colors
    &.nouislider {
        @each $name, $color in $e-state-colors {
            &.nouislider-connect-#{$name} {
                border-color: e-get($color, base);

                .noUi-connects {
                    background: e-get($color, base);
                }

                .noUi-origin {
                    .noUi-handle {
                        border: 0;
                        background: e-get($color, inverse);
                        box-shadow: 0 3px 6px -3px e-get($color, base);
                    }
                }
            }
        }
    }
}

.noUi-target {
    border: 1px solid $input-border-color;
    background: e-base-color(grey, 1);
    box-shadow: none;

    .noUi-connect {
        background: e-state-color(brand, base);
    }

    .noUi-handle {
        border: 1px solid e-base-color(grey, 1);
        box-shadow: 0 3px 6px -3px rgba(#000, .7);
    }
}
